<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Website</title>
</head>

<body>
<div class="navbar">
    <span class="title"><a href="/" style="text-decoration: none;color: black">Back To Main Page</a></span>
</div>

<div class="card">
    <a onclick="window.history.go(-1)">Back</a>
    <h2>
        Create a new class
    </h2>
    <p>Class name</p>
    <input type="text" name="name" id="class_name" class="input">
    <p>Class description</p>
    <textarea type="text" name="descriptive" id="descriptive" class="input"></textarea>
    <br>
    <button onclick="newClass()" class="button" style="margin-top: 15px;">Create</button>
</div>
</body>

<script>
    function newClass() {
        const classname = document.getElementById("class_name").value;
        const descriptive = document.getElementById("descriptive").value;

        fetch('/api/class', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                classname: classname,
                descriptive: descriptive
            })
        })
            .then(response => {
                if (!response.ok) {
                    alert("An unknown error has occurred. Please try again later.");
                    throw new Error('Failed to post class');
                }
                alert("Creating Class Success!");
                return response.json();
            })
            .then(data => {
                window.location.href = `/class?classname=${classname}`;
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }
</script>
<style>
    body {
        font-family: lexend;
        margin: 0;
        padding: 0;
        background-color: #F9F2E0;
    }

    .navbar {
        background-color: #0056b3;
        padding: 20px 5%;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        text-decoration: none;
        color: #555;
        display: flex; /* 使用 flex 布局 */
        justify-content: flex-start; /* 将内容从左侧对齐 */
        align-items: center; /* 垂直居中 */
    }

    .title {
        font-size: 24px;
        font-weight: bold;
        color: #333;
    }

    .card {
        background-color: #1660AB;
        margin: 20px 5%;
        padding: 15px 30px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .button {
        background-color: #555;
        color: #ffffff;
        padding: 10px 20px;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
    }

    .button:hover {
        background-color: #2980b9;
    }

    .input {
        padding: 10px;
        border: 1px solid #cccccc;
        border-radius: 5px;
        width: 500px;
        font-size: 16px;
    }

    .input:focus {
        outline: none;
        border-color: #3498db;
    }
</style>
</html>